<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8"><!--设定文档的字符编码为 UTF - 8，这样可以支持各种语言字符的正确显示。 -->
    
    <meta name="viewport" content="width=device-width, initial-scale=1.0"><!-- 针对移动设备进行优化，width=device-width 让页面宽度适配设备屏幕宽度，initial-scale=1.0 设定页面初始缩放比例为 1。 -->
     <link rel="stylesheet" href="styles.css"><!--将外部 CSS 文件 styles.css 引入到当前 HTML 文档中，用于为页面添加样式。 -->
     <title>关于我们</title><!--定义浏览器窗口或标签页上显示的页面标题，这里是 “关于我们” -->
</head>

<body>

    <header>
        <img src="tp/logo.jpg" alt="宿舍网站Logo" class="logo">
        <nav>
            <a href="../index.html">首页</a>
            <a href="members.html">宿舍成员</a>
            <a href="life.html">宿舍生活</a>
            <a href="stories.html">宿舍故事</a>
            <a href="#">关于我们</a>
            <!-- <a> 标签创建超链接，href 属性指定链接的目标地址。../index.html 表示返回上一级目录并访问 index.html 文件，# 表示当前页面（这里点击 “关于我们” 不会跳转）。 -->
        </nav>
    </header>

    <main>
        <!-- 网站简介 -->
         <section id="website - intro"><!--用于对页面内容进行分块，id="website - intro" 为该部分设置了一个唯一标识符 -->
             <h2>网站简介</h2> <!--定义二级标题，这里是 “网站简介”  -->
            <p>创建目的：记录宿舍生活的点滴，增进室友之间的感情，分享我们的故事和回忆。</p>
             <p>功能特点：提供宿舍成员介绍、宿舍生活记录、宿舍故事分享等功能，方便大家随时查看和更新。</p><!--用于定义段落文本 -->
        </section>

        <!-- 联系我们 -->
        <section id="contact - us">
            <h2>联系我们</h2>
            <p>邮箱：dorm@example.com</p>
            <p>社交媒体：抖音, 小红书</p>
             <form action=""><!--<form> 标签：用于创建 HTML 表单，action="" 指定表单数据提交的目标地址，这里为空表示提交到当前页面。 -->
                <label for="name">姓名：</label>
                <!-- <label> 标签：为表单元素添加描述性文本，for 属性的值要与对应的表单元素的 id 属性值一致，这样点击标签时会聚焦到对应的表单元素上 -->
                <input type="text" id="name" required>
                <!-- <input> 标签：用于创建各种表单输入字段，type="text" 表示创建一个文本输入框，id="name" 为输入框设置唯一标识符，required 表示该字段为必填项 -->
                <label for="message">留言：</label>
                <textarea id="message" required></textarea>
                <!-- <textarea> 标签：用于创建多行文本输入框，id="message" 为其设置唯一标识符，required 表示必填。 -->
                <input type="submit" value="提交">
            </form>
        </section>
    </main>

      <footer> <!-- <footer> 标签：通常用于放置页面的底部信息，如版权声明、联系方式等。  -->
        <p>版权归本宿舍所有，20XX - 20XX</p>
        <p>邮箱：dorm@example.com</p>
    </footer>

     <script src="script.js"></script><!--<script> 标签：用于引入外部 JavaScript 文件 script.js，该文件中的代码可以为页面添加交互功能。 -->
</body>

</html>